<template>
  <div class="father">
    <div class="pc-home" v-if="!isphone">
      <!-- <el-empty
        image="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F13%2Fc0%2F3a%2F13c03ad577b01296a20a170002031813.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659752676&t=3306cbd345f4a8c240c6b5142fef9cec"
        :image-size="800"
        description="搜的什么傻逼东西"
      ></el-empty> -->
      <div class="pc-home-top">
        <div class="top-but">
          <div>
            <el-button size="medium" round @click="value1 = 'b'"
              >商品升序</el-button
            >
            <el-button size="medium" round @click="value1 = 'c'"
              >商品降序</el-button
            >
            <el-button size="medium" round @click="value1 = 'a'"
              >默认排序</el-button
            >
          </div>
          <div class="top-right">
            <el-input placeholder="最小预算" v-model="intMin" clearable>
            </el-input>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-input placeholder="最大预算" v-model="intMax" clearable>
            </el-input>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" plain @click="select">筛选</el-button>
          </div>
        </div>
      </div>
      <div class="pc-home-bottom">
        <el-col :span="8">
          <el-card
            shadow="hover"
            class="pc-shop"
            v-for="item in searchres"
            :key="item.id"
          >
            <img :src="item.img" alt="" />
            <h2 class="pc-shop-p3">
              <span>售价:</span><span style="color: red">{{ item.price }}</span>
            </h2>
            <p class="pc-shop-p1">{{ item.name }}</p>
          </el-card>
        </el-col>
      </div>
    </div>
    <div class="phone-home" v-else>
      <div class="app">
        <div v-if="searchres == undefined" class="mistake">
          <van-empty description="对不起你搜索的垃圾东西不配上我的网页" />
        </div>
        <div v-else>
          <div class="app_span">
            <div class="app_span_div1">
              <span>预算: &nbsp; &nbsp; &nbsp;</span>
              <span
                ><input type="number" name="" id="" v-model="intMin"
              /></span>
              <span>----------</span>
              <span
                ><input type="number" name="" id="" v-model="intMax"
              /></span>
            </div>
            <div>
              <van-button round type="info" @click="select">筛选</van-button>
            </div>
          </div>
          <van-empty
            description="这点钱想买我们的东西?"
            v-if="searchres.length == 0"
          />
          <div class="products" v-else>
            <div class="product_shop" v-for="item in searchres" :key="item.id">
              <img :src="item.img" alt="" @click="godetail(item.id)" />
              <p class="product_p1">{{ item.name }}</p>
              <p>
                <span style="font-weight: bolder; font-size: 14px">售价: </span
                ><span style="color: red">${{ item.price }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { getgoodsbycontent } from '@/api';
// import { get } from 'http';
export default {
  data() {
    return {
      value1: 'a',
      intMin: '',
      intMax: '',
      searchres: [],
      temp: [],
      content: this.text,
      pcMin: '',
      pcMax: '',
    };
  },
  computed: {
    ...mapState('productDetails', ['text']),
    ...mapState('media', ['isphone']),
  },
  async created() {
    const res = await getgoodsbycontent({ content: this.text });
    this.searchres = res.data.data;
    this.temp = JSON.parse(JSON.stringify(this.searchres));
    if (this.searchres.length == 0) {
      this.searchres = undefined;
    }
  },
  methods: {
    godetail(id) {
      this.$router.push('/detail/' + id);
    },
    select() {
      this.searchres = this.temp.filter((item) => {
        return (
          parseInt(item.price) >= this.intMin &&
          parseInt(item.price) <= this.intMax
        );
      });
    },
  },
  watch: {
    text: {
      deep: true,
      immediate: true,
      handler(nv) {
        getgoodsbycontent({ content: nv }).then((res) => {
          this.searchres = res.data.data;
          console.log(this.searchres);
        });
      },
    },
    value1(nv) {
      if (nv == 'b') {
        this.searchres.sort((a, b) => {
          return parseInt(a.price) - parseInt(b.price);
        });
      }
      if (nv == 'c') {
        this.searchres.sort((a, b) => {
          return parseInt(b.price) - parseInt(a.price);
        });
      }
      if (nv == 'a') {
        this.searchres = this.temp;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.app {
  margin-top: 52px;
  margin-bottom: 50px;
  .app_span {
    height: 50px;
    width: 100%;
    line-height: 50px;
    display: flex;
    justify-content: space-around;
    .app_span_div1 {
      margin-top: 5px;
      // background-color: rgb(99, 126, 126);
    }
    span {
      font-size: 18px;
      font-weight: bold;
      input {
        width: 60px;
        height: 35px;
        border: 1px solid;
        border-radius: 50px;
      }
      button {
        // background: greenyellow;
        color: #fff;
        font-size: 18px;
      }
      .van-button {
        height: 35px;
      }
    }
  }
  .products {
    width: 90%;
    height: 100%;
    background-color: #f8f8f8;
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    .product_shop {
      border-radius: 10px;
      width: 45%;
      height: 220px;
      background-color: white;
      margin-top: 5px;
      display: flex;
      flex-direction: column;

      img {
        border: 0;
        vertical-align: middle;
        width: 100%;
      }
      .product_p1 {
        font-weight: bolder;
        font-size: 14px;
      }
    }
  }
  .mistake {
    font-size: 50px;
    color: red;
  }
}
.pc-home {
  width: 1200px;
  margin: 0 auto;
  .pc-home-top {
    height: 50px;
    border: 1px solid #7d7676;
    margin: 40px auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    .top-but {
      width: 1000px;
      height: 50px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .top-right {
        display: flex;
      }
    }
  }
  .pc-home-bottom {
    width: 1200px;
    // height: 400px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 50px;
    .el-col,
    .el-col-8 {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .pc-shop {
      margin: 10px 20px;
      width: 220px;
      height: 320px;
      background-color: white;
      border: 1px solid #f8f8f8;
      flex-direction: column;
      align-items: center;
      img {
        width: 90%;
        margin: 0 auto;
        border-radius: 3px;
      }
      .pc-shop-p1 {
        width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .pc-shop-p3 {
        line-height: 40px;
      }
    }
  }
}
</style>
